<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开发工具 - 我的个人博客</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/main.js" defer></script>
</head>
<body>
    <header>
        <nav class="main-nav">
            <div class="logo">
                <h1><a href="index.html">我的博客</a></h1>
            </div>
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="#" class="nav-link active">技术分享</a>
                    <ul class="submenu">
                        <li><a href="frontend.html">前端开发</a></li>
                        <li><a href="backend.html">后端开发</a></li>
                        <li><a href="tools.html" class="active">开发工具</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">生活随笔</a>
                    <ul class="submenu">
                        <li><a href="travel.html">旅行日记</a></li>
                        <li><a href="food.html">美食推荐</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">关于我</a>
                    <ul class="submenu">
                        <li><a href="profile.html">个人简介</a></li>
                        <li><a href="contact.html">联系方式</a></li>
                    </ul>
                </li>
            </ul>
            <button id="theme-toggle" class="theme-toggle">
                <span class="light-icon">☀️</span>
                <span class="dark-icon">🌙</span>
            </button>
        </nav>
    </header>

    <main>
        <div class="page-header">
            <h2>开发工具</h2>
            <p>分享提高开发效率的工具和使用技巧</p>
        </div>

        <div class="content-grid">
            <div class="main-content">
                <div class="search-box">
                    <input type="text" placeholder="搜索工具相关文章..." id="search-input">
                    <button type="button" id="search-btn">搜索</button>
                </div>

                <article class="blog-post">
                    <div class="post-item" data-category="tools">
                        <div class="post-header">
                            <h3>VSCode 高效开发技巧</h3>
                            <div class="post-meta">
                                <span class="post-date">2024-01-22</span>
                                <span class="post-views">��读: 567</span>
                                <span class="post-category">分类: IDE工具</span>
                            </div>
                        </div>
                        <img src="https://picsum.photos/800/400?random=16" alt="文章配图" class="post-image">
                        <div class="post-content">
                            <h4>必备插件推荐</h4>
                            <ul>
                                <li>ESLint - 代码规范检查</li>
                                <li>Prettier - 代码格式化</li>
                                <li>GitLens - Git增强</li>
                                <li>Live Server - 实时预览</li>
                            </ul>
                            <h4>快捷键提升效率</h4>
                            <pre><code>
// 常用快捷键
Ctrl + P         快速打开文件
Ctrl + Shift + P 命令面板
Alt + ↑/↓        移动当前行
Ctrl + /         注释代码
F12              转到定义
Alt + F12        查看定义
                            </code></pre>
                            <h4>自定义代码片段</h4>
                            <p>创建自定义代码片段可以大大提高编码效率。以下是一个React组件的代码片段示例：</p>
                            <pre><code>
{
  "React Function Component": {
    "prefix": "rfc",
    "body": [
      "import React from 'react'",
      "",
      "const ${1:ComponentName} = () => {",
      "  return (",
      "    <div>",
      "      $2",
      "    </div>",
      "  )",
      "}",
      "",
      "export default ${1:ComponentName}"
    ],
    "description": "React Function Component"
  }
}
                            </code></pre>
                        </div>
                        <div class="post-tags">
                            <span class="tag">VSCode</span>
                            <span class="tag">IDE</span>
                            <span class="tag">效率工具</span>
                        </div>
                    </div>

                    <div class="post-item" data-category="tools">
                        <div class="post-header">
                            <h3>Docker 容器化实践指南</h3>
                            <div class="post-meta">
                                <span class="post-date">2024-01-21</span>
                                <span class="post-views">阅读: 423</span>
                                <span class="post-category">分类: 容器化</span>
                            </div>
                        </div>
                        <img src="https://picsum.photos/800/400?random=17" alt="文章配图" class="post-image">
                        <div class="post-content">
                            <h4>Dockerfile最佳实践</h4>
                            <pre><code>
# 使用多阶段构建
FROM node:14 AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
                            </code></pre>
                            <h4>常用Docker命令</h4>
                            <ul>
                                <li>docker build - 构建镜像</li>
                                <li>docker run - 运行容器</li>
                                <li>docker-compose up - 启动服务</li>
                                <li>docker logs - 查看日志</li>
                            </ul>
                        </div>
                        <div class="post-tags">
                            <span class="tag">Docker</span>
                            <span class="tag">容器化</span>
                            <span class="tag">DevOps</span>
                        </div>
                    </div>
                </article>

                <!-- 评论区 -->
                <div class="comments-section">
                    <h3>评论</h3>
                    <div class="comment-form">
                        <form id="commentForm">
                            <div class="form-group">
                                <input type="text" id="commenterName" placeholder="您的昵称" required>
                            </div>
                            <div class="form-group">
                                <textarea id="commentContent" placeholder="写下您的评论..." required></textarea>
                            </div>
                            <button type="submit" class="submit-btn">发表评论</button>
                        </form>
                    </div>
                    <ul class="comment-list"></ul>
                </div>
            </div>

            <aside class="sidebar">
                <!-- 文章目录 -->
                <div class="post-toc widget">
                    <h3>文章目录</h3>
                    <ul class="toc-list">
                        <li><a href="#vscode">VSCode 高效开发技巧</a></li>
                        <li><a href="#docker">Docker 容器化实践指南</a></li>
                    </ul>
                </div>

                <!-- 推荐工具 -->
                <div class="recommended-tools widget">
                    <h3>推荐工具</h3>
                    <ul class="tool-list">
                        <li>
                            <div class="tool-icon">🔧</div>
                            <div class="tool-info">
                                <h4>VSCode</h4>
                                <p>强大的代码编辑器</p>
                            </div>
                        </li>
                        <li>
                            <div class="tool-icon">🐳</div>
                            <div class="tool-info">
                                <h4>Docker</h4>
                                <p>容器化部署工具</p>
                            </div>
                        </li>
                        <li>
                            <div class="tool-icon">🔍</div>
                            <div class="tool-info">
                                <h4>Postman</h4>
                                <p>API测试工具</p>
                            </div>
                        </li>
                    </ul>
                </div>

                <!-- 标签云 -->
                <div class="tags-widget widget">
                    <h3>标签云</h3>
                    <div class="tag-cloud">
                        <a href="#" class="tag-item" style="font-size: 1.4em">VSCode</a>
                        <a href="#" class="tag-item" style="font-size: 1.2em">Docker</a>
                        <a href="#" class="tag-item" style="font-size: 1.6em">Git</a>
                        <a href="#" class="tag-item">Postman</a>
                        <a href="#" class="tag-item" style="font-size: 1.3em">IDE</a>
                        <a href="#" class="tag-item">效率工具</a>
                    </div>
                </div>
            </aside>
        </div>
    </main>

    <footer>
        <p>&copy; 2024 我的个人博客. All rights reserved.</p>
    </footer>

    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/main.js"></script>
    <script src="assets/js/article-list.js"></script>
</body>
</html> 